Step 6 - Add application states

In this step you learn how to use the State Tools window to create and use application states.

Create states in the State Tools window

Use a State Manager to create different states in your application. The State Tools window shows the State Manager for the node you select in the Project window.

You can find the State Tools window below the Preview window.

In this section you use the Kanzi Studio State Tools to create a state manager and define application states.

To create states in the State Tools window:

1. In the Pages window click the Car node to go to that Page node.
   
2. In the Project window in the Car Page node select the Car Viewport 2D node.
   
3. In the State Tools window click Create State Manager.
   Kanzi Studio creates a new state manager, assigns it to the Car node, and sets the State Tools window to the Edit mode. When the State Tools window is in the Edit mode, the Preview window tab and border turn orange.
   
   TIP

   When the State Tools window is in the Edit mode Kanzi Studio keeps track of all the changes you make to the property values in the selected node and its tree. If you are not changing the definition of states in your application, switch off the editing mode of the State Tools.

   
4. In the State Tools click Create State twice to create two states, double-click the name of each state, and rename the states.
   For example, name one state Side and the other Front.
   
5. Use the State Tools to set what the application looks like in that state:
   1. In the Project window select the Car > car > RootNode > Camera_Root node and in the Properties window set the Layout Transformation Rotation Y property field to 20.
      With this setting you show the car model from a different angle by rotating the node which contains the Camera node.
      
   2. In the State Tools window in the Side state click .
      When you click Kanzi Studio saves to that state the values of properties you changed in the project.
      
6. Repeat the previous step, but set the Layout Transformation Rotation Y property field to -20 and save the change to the Front state.
   
   TIP

   When the State Tools window is in the Edit you can click any state in that State Manager to see what your application looks like in that state.

7. Click Edit State Manager to exit the State Tools Edit mode.
   

Set the application state

In this section you create a button in your Kanzi application which allows users of your application to switch between the states you created in the previous section.

To set the application state:

1. In the Project window press Alt and right-click the Car Page node and select Button 2D.
   
2. In the Properties window add the Horizontal Alignment and Vertical Alignment properties and set both to Stretch.
   With this setting you set the size of the Button 2D node to be of the same size as the Car Page node, its parent node. In this way you enable the users of your application to click anywhere in Car Page node to activate the button.
   
3. In the Node Components window in the Button: Click trigger click the Add dropdown menu and select the Next State action.
   Use the Next State action to go to the next state in the state group of the state manager you set in this action.
   
4. In the Next State action settings set:
   • State Group to StateGroup
   • Target Item to Prefabs/Car/Car

   Click Save.
   

In the Preview window when you click anywhere in the Car Page, except the Next and Previous buttons, you switch between the Side and Front application states.

What's next?

In this tutorial you learned about the Kanzi Studio features by creating a simple Kanzi application. Now you can start learning how to use Kanzi:

• Complete the tutorials. See Tutorials.
• Read about the fundamental concepts that make Kanzi tick. See Kanzi fundamentals.
• Explore the details of Kanzi features. See Working with ....
• Make sure that the performance of your Kanzi application is optimal. See Best practices.

Getting help

When you want to find out more about an item in your project, such as what is a Viewport 2D, select an item in the Project or Library window and in the Properties window click or press F1.

Kanzi Studio opens Kanzi documentation in your default browser and shows the relevant topic.

See also

To learn more about application states, complete Tutorial: Use state managers to control your application.

Open topic with navigation